<template>
	<div class="body">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">添加新图书</h3>
			</div>
			<form class="panel-body form-inline">
				<div class="input-group">
					<div class="input-group-addon">书名</div>
					<input type="text" class="form-control" placeholder="请输入书名" 
					 v-model="bookname" />
				</div>

				<div class="input-group">
					<div class="input-group-addon">作者</div>
					<input type="text" class="form-control" placeholder="请输入作者" 
					v-model="author" />
				</div>

				<div class="input-group">
					<div class="input-group-addon">出版社</div>
					<input type="text" class="form-control" placeholder="请输入出版社" 
					v-model="publisher" />
				</div>

				<button class="btn btn-primary" @click.prevent="on" @keyup.prevent="on" >添加</button>
			</form>
		</div>

		<!-- 图书的表格 -->
		<table class="table table-bordered table-hover">
			<thead>
				<tr>
					<th>Id</th>
					<th>书名</th>
					<th>作者</th>
					<th>出版社</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in list" :key="item.id">
					<td> {{ item.id }} </td>
					<td> {{ item.bookname }} </td>
					<td> {{ item.author }} </td>
					<td> {{ item.publisher }} </td>
					<td>
						<a href="javascript:;" class="del"
						@click="del(item.id)"
						>删除</a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
	// todo axios 实现图书管理案例
	//  安装 bootstrap  需要安装3的版本  yarn add bootstrap@3
	//  导入 bootstrap的css文件美化样式

import 'bootstrap/dist/css/bootstrap.css'
	// 接口地址： https://www.showdoc.com.cn/1834761734600444/8449559255355128
import axios from 'axios'

axios.defaults.baseURL = 'http://ajax-api.itheima.net'

	export default {
		
		data() {
			return {
				list: [],
				bookname: '',
				author: '',
				publisher: ''
			}
		},
		created(){
			this.getList()
		},
		methods: {
			async getList(){
					const {data: {data}} = await axios("/api/books")
					console.log(data);
					this.list = data
			},
			async del(id){
					const res = await axios.delete(`/api/books/${id}`)

					this.getList()
			},
			async on(){
				const res = await axios.post('/api/books', {
					bookname: this.bookname,
					author: this.author,
					publisher: this.publisher
				})
				this.bookname = ""
				this.author = ""
				this.publisher = ""

				this.getList()
			}

		}
		
	}
</script>

<style scoped>
	.body {
		padding: 15px;
	}
</style>
